<script lang="ts" setup>
import UserStoress from "@/store/user";
import { UserFilled, Opportunity } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import router from "@/router";
const store = UserStoress();

//进行判断，token中有没有值，有值需跳转用户中心页
if (store.token) {
  //已登录
  router.push("/user");
}

//存储登录信息
const sizeForm = reactive({
  username: "",
  password: "",
  //delivery: false,
});

//const token = ref(localStorage.getItem("token"));
//localStorage.setItem("token", response.data.token);

//api登录
const apiLogin = () => {
  store.userLogin(sizeForm);
};
</script>
<template>
  <div class="public-container">
    <h1 class="login-title">现在登录，结账更快捷。</h1>
    <div class="login-content">
      <h2 class="login-input-title">登录 站点</h2>
      <el-form class="login-form" size="large" :model="sizeForm">
        <el-input
          v-model="sizeForm.username"
          placeholder="请输入账户"
          :prefix-icon="UserFilled"
        />
        <el-input
          v-model="sizeForm.password"
          type="password"
          placeholder="请输入密码"
          show-password
          :prefix-icon="Opportunity"
        />
        <el-button type="primary" size="default" @click.prevent="apiLogin">
          登录
        </el-button>
        <p>
          测试用：<br />账号：<code>test</code>，<br />密码：<code>test</code>
        </p>

        <!--
        <p>
          <el-checkbox
            v-model="sizeForm.delivery"
            label="记住我的账号"
            size="large"
          />
        </p>
        -->
      </el-form>
    </div>
  </div>
</template>
<style lang="less" scoped>
.public-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}
.login-title {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
  padding-top: 34px;
}
.login-content {
  max-width: 640px;
  height: 480px;
  margin: 72px auto 0;
  text-align: center;
}
.login-input-title {
  max-width: 380px;
  margin: 5px auto 13px;
  word-break: break-word;
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 600;
  letter-spacing: 0.009em;
}
.login-form {
  width: 300px;
  margin: 0 auto;
  button {
    margin: 10px 0;
    width: 20%;
  }
}
</style>
